<template>
  <div class="app">
    <Category title="热门游戏列表">
      <ul>
        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
      </ul>
    </Category>

    <Category title="今日美食城市">
      <img :src="food" alt="食物">
    </Category>

    <Category title="今日影视推荐">
      <video :src="movie" controls></video>
    </Category>

    <Category title="中国白酒排行"/>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        games:[
          {id:'asdtrd1',name:'英雄联盟'},
          {id:'asdtrd2',name:'流星蝴蝶剑'},
          {id:'asdtrd3',name:'红色警戒'},
          {id:'asdtrd4',name:'斗罗大陆'}
        ],
        food:'http://49.232.112.44/images/food.jpg',
        movie:'http://49.232.112.44/video/movie.mp4'
      }
    },  
  }
</script>

<style>
  .app {
    background-color: #ddd;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px;
    display: flex;
    justify-content:space-evenly
  }
</style>